<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="请求方流水号" prop="reqSeqNo" labelWidth="100px">
        <el-input
          v-model="queryParams.reqSeqNo"
          placeholder="请输入请求方流水号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="请求时间" prop="createDate">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="商户号" prop="merId">
        <el-input
          v-model="queryParams.merId"
          placeholder="请输入商户号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="收款方账号" prop="crAccNo" labelWidth="100px">
        <el-input
          v-model="queryParams.crAccNo"
          placeholder="请输入收款方账号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="收款方姓名" prop="crAccName" labelWidth="100px">
        <el-input
          v-model="queryParams.crAccName"
          placeholder="请输入收款方姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="金额" prop="amt">
        <el-input
          v-model="queryParams.amt"
          placeholder="请输入金额"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="银行流水号" prop="respSeqNo" labelWidth="100px">
        <el-input
          v-model="queryParams.respSeqNo"
          placeholder="请输入银行流水号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="银行状态" prop="status">
        <el-select v-model="queryParams.respCode" placeholder="请选择状态">
          <el-option
            v-for="dict in bankStatyusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['fund:dircttrade:export']"
        >导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dircttradeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="请求方流水号" align="center" prop="reqSeqNo" width="180px"/>
      <el-table-column label="请求时间" align="center" prop="createDate">
      <template slot-scope="scope">
        <span>{{ parseTime(scope.row.createDate) }}</span>
      </template>
      </el-table-column>
      <el-table-column label="商户号" align="center" prop="merId"/>
      <el-table-column label="商户名称" align="center" prop="merName" width="100px"/>
      <el-table-column label="收款方账号" align="center" prop="crAccNo" width="180px"/>
      <el-table-column label="收款方户名" align="center" prop="crAccName" width="80px"/>
      <el-table-column label="付款方账号" align="center" prop="dbAccNo" width="150px"/>
      <el-table-column label="付款方户名" align="center" prop="dbAccName" width="200px"/>
      <el-table-column label="金额(元)" align="center" prop="amt"/>
      <el-table-column label="银行状态" align="center" prop="respCode">
        <template slot-scope="scope">
      <span v-if="scope.row.respCode == 0">
          <el-tag type="info" effect="dark" size="mini">初始化</el-tag>
      </span>
          <span v-if="scope.row.respCode == 1">
          <el-tag type="success" effect="dark" size="mini">成功</el-tag>
      </span>
          <span v-if="scope.row.respCode == 2">
          <el-tag type="warning" effect="dark" size="mini">处理中</el-tag>
      </span>
          <span v-if="scope.row.respCode == 3">
          <el-tag type="danger" effect="dark" size="mini">失败</el-tag>
      </span>
        </template>
      </el-table-column>
      <el-table-column label="银行返回信息" align="center" prop="respInfo"/>
      <el-table-column label="银行流水号" align="center" prop="respSeqNo"/>
      <el-table-column label="银行响应时间" align="center" prop="respTime"/>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['fund:dircttrade:edit']"
          >查看
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改银行订单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="请求方流水号:" prop="reqSeqNo" labelWidth="120px">
              <span>{{ (form.reqSeqNo) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求时间:" prop="reqTime" labelWidth="100px">
              <span>{{ (form.reqTime) }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="10">
            <el-form-item label="商户号:" prop="merId">
              <span>{{ (form.merId) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户名称:" prop="merName">
              <span>{{ (form.merName) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="他行行别:">
              <span>{{ (form.crBankType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款方省市代码:" prop="crProv" labelWidth="120px">
              <span>{{ (form.crProv) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="收款方账号:" prop="crAccNo" labelWidth="100px">
              <span>{{ (form.crAccNo) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收款方货币码:" prop="crCur" labelWidth="120px">
              <span>{{ (form.crCur) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="收款方户名:" prop="crAccName" labelWidth="100px">
              <span>{{ (form.crAccName) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款方开户行名:" prop="crBankName" labelWidth="120px">
              <span>{{ (form.crBankName) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="收款方开户行号:" prop="crBankNo" labelWidth="120px">
              <span>{{ (form.crBankNo) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="他行标志:" prop="othBankFlag" labelWidth="100px">
            <span v-if="form.othBankFlag == 0">
              <span>本行</span>
          </span>
              <span v-if="form.othBankFlag == 1">
              <span>他行</span>
          </span>
            </el-form-item>
          </el-col>
        </el-row>

        <!--el-form-item label="付款方省市代码" prop="dbProv">
          <el-input v-model="form.dbProv" placeholder="请输入付款方省市代码"/>
        </el-form-item-->
        <el-row>
          <el-col :span="10">
            <el-form-item label="付款方账号:" prop="dbAccNo" labelWidth="100px">
              <span>{{ (form.dbAccNo) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款方户名:" prop="dbAccName" labelWidth="100px">
              <span>{{ (form.dbAccName) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="付款方货币码" prop="dbCur" labelWidth="120px">
              <span>{{ (form.dbCur) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="付款方货币码" prop="dbLogAccNo" labelWidth="100px">
              <span>{{ (form.dbLogAccNo) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="付款方行别" labelWidth="100px">
              <el-select v-model="form.drBankType" placeholder="请选择付款方行别" width="100px">
                <el-option label="请选择字典生成" value=""/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="5">
            <el-form-item label="金额(元):" prop="amt">
              <span>{{ (form.amt) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="大额支付标识:" prop="psFlag" labelWidth="120px">
              <span>{{ (form.psFlag) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约标志:" prop="bookingFlag">
          <span v-if="form.bookingFlag == 0">
              <span>不预约</span>
          </span>
              <span v-if="form.bookingFlag == 1">
              <span>预约</span>
          </span>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row>
          <el-col :span="10">
            <el-form-item label="预约时间:" prop="bookingTime">
              <span>{{ (form.bookingTime) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加急标志:" prop="urgencyFlag">
          <span v-if="form.bookingFlag == 0">
              <span>不加急</span>
          </span>
              <span v-if="form.bookingFlag == 1">
              <span>加急</span>
          </span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="10">
            <el-form-item label="用途:" prop="whyUse">
              <span>{{ (form.whyUse) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附言:" prop="postScript">
              <span>{{ (form.postScript) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="银行流水号:" prop="respSeqNo" labelWidth="100px">
              <span>{{ (form.respSeqNo) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行响应时间:" prop="respTime" labelWidth="120px">
              <span>{{ (form.respTime) }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="10">
            <el-form-item label="银行状态:" prop="respCode" labelWidth="120px">
      <span v-if="form.respCode == 0">
          <el-tag type="info" effect="dark" size="mini">初始化</el-tag>
      </span>
              <span v-if="form.respCode == 1">
          <el-tag type="success" effect="dark" size="mini">成功</el-tag>
      </span>
              <span v-if="form.respCode == 2">
          <el-tag type="warning" effect="dark" size="mini">处理中</el-tag>
      </span>
              <span v-if="form.respCode == 3">
          <el-tag type="danger" effect="dark" size="mini">失败</el-tag>
      </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行返回信息:" prop="respInfo" labelWidth="120px">
              <respInfo>{{ (form.respInfo) }}</respInfo>
            </el-form-item>
          </el-col>
        </el-row>
        <!--el-form-item label="银行落地处理标志" prop="waitFlag">
          <el-input v-model="form.waitFlag" placeholder="请输入银行落地处理标志"/>
        </el-form-item>
        <el-form-item label="私有数据区" prop="respPrvData">
          <el-input v-model="form.respPrvData" placeholder="请输入私有数据区"/>
        </el-form-item>
        <el-form-item label="租户代码" prop="corpCode">
          <el-input v-model="form.corpCode" placeholder="请输入租户代码"/>
        </el-form-item>
        <el-form-item label="租户名称" prop="corpName">
          <el-input v-model="form.corpName" placeholder="请输入租户名称"/>
        </el-form-item>
        <el-form-item label="请求IP" prop="reqIp">
          <el-input v-model="form.reqIp" placeholder="请输入请求IP"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item-- label="备注" prop="remarks">
          <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容"/>
        </el-form-item-->
      </el-form>
      <!--div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div-->
    </el-dialog>
  </div>
</template>

<script>
  import {
    listDircttrade,
    getDircttrade,
    delDircttrade,
    addDircttrade,
    updateDircttrade,
    exportDircttrade
  } from "@/api/fund/dircttrade";

  export default {
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        dateRange: [],
        // 总条数
        total: 0,
        // 银行订单表表格数据
        dircttradeList: [],
        //银行订单状态
        bankStatyusOptions: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          reqSeqNo: undefined,
          systemId: undefined,
          reqTime: undefined,
          merId: undefined,
          merName: undefined,
          crBankType: undefined,
          crProv: undefined,
          crAccNo: undefined,
          crCur: undefined,
          crAccName: undefined,
          crBankName: undefined,
          crBankNo: undefined,
          othBankFlag: undefined,
          dbProv: undefined,
          dbAccNo: undefined,
          dbAccName: undefined,
          dbCur: undefined,
          dbLogAccNo: undefined,
          drBankType: undefined,
          amt: undefined,
          psFlag: undefined,
          bookingFlag: undefined,
          bookingTime: undefined,
          urgencyFlag: undefined,
          whyUse: undefined,
          postScript: undefined,
          respSeqNo: undefined,
          respTime: undefined,
          respSource: undefined,
          respCode: undefined,
          respInfo: undefined,
          waitFlag: undefined,
          respPrvData: undefined,
          corpCode: undefined,
          corpName: undefined,
          reqIp: undefined,
          status: undefined,
          remarks: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          reqSeqNo: [
            {required: true, message: "请求方流水号不能为空", trigger: "blur"}
          ], reqTime: [
            {required: true, message: "请求时间不能为空", trigger: "blur"}
          ], crAccNo: [
            {required: true, message: "收款方账号不能为空", trigger: "blur"}
          ], crCur: [
            {required: true, message: "收款方货币码不能为空", trigger: "blur"}
          ], crAccName: [
            {required: true, message: "收款方户名不能为空", trigger: "blur"}
          ], othBankFlag: [
            {required: true, message: "他行标志 0：本行 1：他行不能为空", trigger: "blur"}
          ], dbProv: [
            {required: true, message: "付款方省市代码不能为空", trigger: "blur"}
          ], dbAccNo: [
            {required: true, message: "付款方账号不能为空", trigger: "blur"}
          ], dbAccName: [
            {required: true, message: "付款方户名不能为空", trigger: "blur"}
          ], dbCur: [
            {required: true, message: "付款方货币码不能为空", trigger: "blur"}
          ], amt: [
            {required: true, message: "金额不能为空", trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.getList();
      this.getDicts("bank_status").then(response => {
        this.bankStatyusOptions = response.data;
      });
    },
    methods: {
      // 状态审核字典翻译
      bankStatusFormat(row, column) {
        return this.selectDictLabel(this.bankStatyusOptions, row.respCode);
      },
      /** 查询银行订单表列表 */
      getList() {
        this.loading = true;
        listDircttrade(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.dircttradeList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          reqSeqNo: undefined,
          systemId: undefined,
          reqTime: undefined,
          merId: undefined,
          merName: undefined,
          crBankType: undefined,
          crProv: undefined,
          crAccNo: undefined,
          crCur: undefined,
          crAccName: undefined,
          crBankName: undefined,
          crBankNo: undefined,
          othBankFlag: undefined,
          dbProv: undefined,
          dbAccNo: undefined,
          dbAccName: undefined,
          dbCur: undefined,
          dbLogAccNo: undefined,
          drBankType: undefined,
          amt: undefined,
          psFlag: undefined,
          bookingFlag: undefined,
          bookingTime: undefined,
          urgencyFlag: undefined,
          whyUse: undefined,
          postScript: undefined,
          respSeqNo: undefined,
          respTime: undefined,
          respSource: undefined,
          respCode: undefined,
          respInfo: undefined,
          waitFlag: undefined,
          respPrvData: undefined,
          corpCode: undefined,
          corpName: undefined,
          createBy: undefined,
          createDate: undefined,
          reqIp: undefined,
          status: "0",
          updateBy: undefined,
          updateDate: undefined,
          remarks: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {

        this.dateRange = [],
          this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加银行订单表";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getDircttrade(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改银行订单表";
        });
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateDircttrade(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addDircttrade(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除银行订单表编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delDircttrade(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出银行订单表数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportDircttrade(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      }
    }
  };
</script>
